<template>
<div class="event-containner">
  <van-nav-bar
  class="page-nav-bar"
  left-arrow
  title="投票详情"
  @click="this.$router.back();
"
  >

</van-nav-bar>

    <div class="loading-wrap" v-if="loading">
        <van-loading color="#3296fa" vertical>加载中</van-loading>
    </div> 










<div class="article-detail" v-else-if="vote">
    <div class="article-content-card">

  <h1 class="title">{{ vote.title }}</h1>

  <div class="article-content" v-html="vote.description"></div>
  <div class="article-footer">
    <div class="article-source-card">
      <div class="article-source">{{ vote.clubs.name }}</div>
    </div>

  </div><hr >


  <div class="author-info">
  <div class="author-name">{{ vote.users.name }}</div>
  <div class="article-date">联系邮件：{{ vote.users.email }}</div>
  <div class="article-date">联系手机号：{{ vote.users.phone }}</div>
  <div class="date">开始时间：{{ dayjs(vote.startTime).format('YYYY-MM-DD HH:mm:ss')}}<br>结束时间：{{dayjs(vote.endTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
      </div>
<hr>
<van-field name="radio" label="选项">
  <template #input>
    <van-radio-group v-model="checked" direction="horizontal">
      <!-- use v-for loop to generate radio buttons from the options -->
      <van-radio v-for="option in vote.options" :key="option.id" :name="option.id">{{ option.name }}[{{ option.voteCount }}人选择]</van-radio>
    </van-radio-group>
  </template>
</van-field>

<van-button type="primary" block @click="submitVote">投票</van-button>


</div>

  </div>

  <div class="error-wrap" v-else-if="errStatus === 404">
    <van-icon name="failure"></van-icon>
    <p class="text">该资源不存在</p>
    </div>
 
    
  <div class="error-wrap" v-else>
    <van-icon name="failure"></van-icon>
    <p class="text">内容加载失败！</p>
    <van-button class="retry-btn" @click="loadevent(props.voteId)">点击重试</van-button>
  </div>
</div>
</template>

<script>
import {getVoteById,submitVoteTtem} from '../../api/vote';
import { onMounted,reactive,toRefs,ref } from 'vue';
import dayjs from '../../utils/day';
import { Toast } from 'vant';
function useLoadevent(voteId,state){
    const loadevent= async()=>{
        try{
            const {data}= await getVoteById(voteId);
            
           if(data.code==0){
            state.errStatus=404; 
            //文章已经被删除
           }else{
            state.vote=data.data[0];
           }

        }catch(err){
            //加载失败
        }
        state.loading=false;

    };
    onMounted(()=>{
        loadevent();
    })

}
export default {
    props:{
      voteId:{
            type:String,
            required:true
        },
    
    },
    setup(props){
      const checked = ref('1');
        const state=reactive({
            vote:{
                title:'',
                description:'',
                users:{
                    name:'',
                    email:'',
                    phone:''
                },
                startTime:'',
                endTime:'',
                clubs:{
                    name:''
                }
            },
            loading:true,
            errStatus:0,
        });
        const submitVote = () => {
  const selectedOption = state.vote.options.find(option => option.id == checked.value)
  submitVoteTtem(selectedOption).then((res)=>{
    if(res.data.code==20000){
      Toast.success("投票成功");
      state.vote.options.forEach(option => {
      if(option.id == selectedOption.id) {
        option.voteCount += 1;
      }
    });
    }else{
      Toast.fail(res.data.msg);
    }
  });
};
        useLoadevent(props.voteId,state);
       return{
        ...toRefs(state),
        dayjs,
      checked,
      submitVote
       } 
    }
};

</script>
<style scoped>
.article-content-card {
  padding: 24px;
  background-color: #fff;
  border-radius: 0px;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
  margin-top: 10px;
}

.article-source-card {
  background-color: #3f64ca;
  color: #fff;
  padding: 8px 16px;
  border-radius: 16px;
  display: inline-block;
}

.article-time-card {
  margin-left: 16px;
  display: inline-block;
}
.loading-wrap{
    padding: 200px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}
.error-wrap{
    padding: 200px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    
}
.title-card {
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 2em;
  font-weight: bold;
  margin: 0;
}

.article-detail {
    
  padding: 16px;
  background-color: #fff;
}

.article-header {
     width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 16px;
}

.author-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f2f2f2;
  border-radius: 4px;
  padding: 12px 16px;
}

.author-info {
  display: flex;
  flex-direction: column;
}

.author-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.article-date {
  font-size: 12px;
  color: #999;
}
.date{
  font-size: 15px;
  color: #f20e0e;
}

.article-content {
  line-height: 1.5;
  font-size: 20px;
}

.article-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  font-size: 14px;
  color: #999;
}

.article-source {
  margin-right: 16px;
}

.article-time {
  margin-left: 16px;
}
.author-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
}

.author-card .author-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: 24px;
}

.author-card .author-info .author-name {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.author-card .article-date {
  font-size: 16px;
  color: #999;
}
.article-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

.author-card {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.author-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20px;
}

.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.author-name {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

.author-desc {
  font-size: 14px;
  margin-bottom: 5px;
}

.article-date {
  font-size: 14px;
  color: #999;
}

</style>